import React from 'react'
import style from './style.module.css'
import { Tag, Space } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
function Index({ itemData }) {
    const navigate = useNavigate()
    return (
        <div className={style['wapper']} onClick={() => {
            navigate('/index/detail', { state: itemData })
        }}>
            <div style={{ position: 'relative' }}><img src={itemData.image} alt="" />
                {
                    itemData.isSelect ? <div style={{
                        position: 'absolute',
                        left: '0', top: '0',
                        padding: '2px 5px',
                        background: '#f00',
                        color: '#fff',
                        borderRadius: '0 5px 0 5px',
                        fontSize: '12px'
                    }}>优选</div> : null
                }
            </div>
            <div className={style['text-wapper']}>
                <h3 dangerouslySetInnerHTML={{ __html: itemData.title }}></h3>
                <p> {itemData.info}</p>
                <p style={{ color: '#f90' }}> {itemData.price}万</p>
                <div style={{ display: 'flex', justifyContent: 'space-around' }}>
                    <Tag color='#000' fill='outline'>
                        {itemData.city}
                    </Tag>
                    <Tag color='#000' fill='outline'>
                        {itemData.type}
                    </Tag>
                    <Tag color='#000' fill='outline'>
                        {itemData.houseType}
                    </Tag>
                    <Tag color='#000' fill='outline'>
                        {itemData.orientation}
                    </Tag>
                </div>
            </div>
        </div>
    )
}

export default Index